<!-- 弹窗数据 -->
<template>
  <div style="height:6vh;background-color:#fff;padding: 10px 20px;">
    <span style="line-height: 60px;font-size: 20px;">进场验收管理 > 物资进场验收</span>
  </div>
  <div>
    <el-card style="margin: 20px;height: 100px;">
      <el-button type="primary" style="margin: 20px" @click="handleAdd">新增</el-button>
      <el-button type="success" @click="handleExportExcel">导出excel</el-button>
      <span class="label" style="margin: 20px">创建时间：</span>
      <el-date-picker v-model="startDate" type="date" placeholder="选择日期" class="date-picker"></el-date-picker>
      <span class="separator">-</span>
      <el-date-picker v-model="endDate" type="date" placeholder="选择日期" class="date-picker"></el-date-picker>
      <el-button type="success" style="margin: 20px" @click="handleSearch">查询</el-button>
      <span class="label">选择项目:</span>
      <el-select placeholder="请选择" style="width: 290px;margin: 10px">
        <el-option label="选项1" value="shanghai"></el-option>
        <el-option label="选项2" value="beijing"></el-option>
      </el-select>
    </el-card>
  </div>
  <div style="display: flex; justify-content: space-between; align-items: center;">
    <div style="display: flex; align-items: center;">
      <span style="margin-left: 20px;width: 80px;">显示</span>
      <el-select placeholder="请选择" style="margin: 10px">
        <el-option label="10" value="shanghai"></el-option>
        <el-option label="50" value="beijing"></el-option>
      </el-select>
      <span>条</span>
    </div>
    <div style="display: flex; align-items: center;">
      <span style="margin-right: 5px;">从当前数据中检索:</span>
      <el-input style="width: 200px;margin: 20px"></el-input>
    </div>
  </div>
  <!--  &lt;!&ndash; 保存用户数据弹窗 &ndash;&gt;-->
  <el-dialog
      :title="dialogTitle"
      style="width: 1000px;padding:40px;" v-model="dialogVisible" :before-close="handleClose">
    <el-form label-width="80px">
      <el-row :gutter="10">
        <el-col>
          <el-form-item label="项目名称">
            <el-input placeholder="请输入进场管理文件"
                      v-model="saveProjectForm.projectId"></el-input>
<!--            <el-select v-model="saveProjectForm.projectId">
&lt;!&ndash;              <el-option label="选项1" value="shanghai"></el-option>&ndash;&gt;
            </el-select>-->
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col>
          <el-form-item label="材料名称">
            <el-input placeholder="请输入进场管理文件" v-model="saveProjectForm.project_id"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col>
          <el-form-item label="上传文件">
            <el-button type="primary" v-model="saveProjectForm.upload">选择文件</el-button>
            <el-input style="margin-top: 20px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col>
          <el-form-item label="材料数量">
            <el-input style="width: 200px;" placeholder="请输入多少数量"
                      v-model="saveProjectForm.materialNumber"></el-input>
            <el-select style="width: 200px;margin-left: 20px" v-model="saveProjectForm.materialUnit">
              <el-option label="吨"></el-option>
              <el-option label="千克"></el-option>
              <el-option label="克"></el-option>
              <el-option label="m²"></el-option>
              <el-option label="m³"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col>
          <el-form-item label="材料规格">
            <el-input placeholder="请输入" v-model="saveProjectForm.approachSpecification"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col>
          <el-form-item label="进厂日期">
            <el-date-picker type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                            v-model="saveProjectForm.enterDate"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col>
          <el-form-item label="取样情况">
            <input type="radio" name="sampleStatus" value="notSampled"
                   :style="{ 'width': '16px', 'height': '16px', 'border-radius': '50%', 'border': '2px solid #ccc', 'background-color': sampleStatus === 'notSampled' ? '#ccc' : 'white', 'margin-right': '8px' }"
                   v-model="sampleStatus"/>
            未取样
            <input type="radio" name="sampleStatus" value="notSampled"
                   :style="{ 'width': '16px', 'height': '16px', 'border-radius': '50%', 'border': '2px solid #ccc', 'background-color': sampleStatus === 'notSampled' ? '#ccc' : 'white', 'margin-right': '8px' }"
                   v-model="sampleStatus"/>
            已取样
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveProject">保存</el-button>
    </template>
  </el-dialog>
  <!--  &lt;!&ndash; 用户数据表格卡片 &ndash;&gt;-->
  <el-card style="margin: 20px;">
    <el-table :data="dataArr">
      <el-table-column label="项目编号" prop="id" align="center"></el-table-column>
      <el-table-column label="项目名称" prop="projectId" align="center"></el-table-column>
      <el-table-column label="材料名称" prop="materialId" align="center"></el-table-column>
      <el-table-column label="材料数量" prop="materialNumber" align="center"></el-table-column>
      <el-table-column label="进场材料规格" prop="approachSpecification" align="center"></el-table-column>
      <el-table-column label="取样情况" prop="sampleStatus" align="center"
                       :formatter="formatSampleStatus"></el-table-column>
      <el-table-column label="合格情况" prop="qualification" align="center"
                       :formatter="formatQualification"></el-table-column>
      <el-table-column label="试验报告份数" prop="reportNumber" align="center"></el-table-column>
      <el-table-column label="添加人" prop="user" align="center"></el-table-column>
      <el-table-column label="添加时间" prop="createTime" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" link>下载</el-button>
          <el-button type="primary" link @click="editCheck(scope.row.id)">编辑</el-button>
          <el-button type="primary" link @click="deleteCheck(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin:30px;float: right;">
      <!--layout="total(总数), sizes(每页总数), prev(上一页), pager(当前页), next(下一页), jumper(跳转页)"
       :pager-count="4" 表示显示4个页码
       :page-sizes="[5, 10, 15, 20]" 表示一共有几个"每页显示多少条"选项
       current-page当前页码 page-size当前页码的条数 total总条数 这三个变量需要和实际数据双向绑定
       :total="400" 表示总条数，需要双向绑定
       @size-change="handleSizeChange" 表示每页显示多少条改变时触发的事件
       @current-change="handleCurrentChange" 表示当前页码改变时触发的事件 -->
      <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[5, 10, 15, 20]"
          v-model:current-page="currentPage"
          v-model:page-size="currentSize"
          v-model:total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
</template>

<script setup>
import { onMounted, ref } from "vue";
import axios from "axios";
import qs from "qs";
import { ElMessage } from "element-plus";


const dialogVisible = ref(false);
//定义弹窗标题的方法
const dialogTitle = ref('');
//定义关闭弹窗的方法
const handleClose = () => {
    saveProjectForm.value = {};
    dialogVisible.value = false;
}


//定义页面加载数据的方法
const dataArr = ref([]); // 修改为 ref 变量并初始化为空数组
const loadData = (id) => {
  axios.get(BASE_URL + '/v1/acceptance/select?id=',id)
    .then((response) => {
      if (response.data.code == 2000) {
        dataArr.value = response.data.data; // 正确赋值响应式数组
      } else {
        ElMessage.error('加载失败!');
      }
    });
}

//定义添加数据（新增）的方法
const handleAdd = () => {
  dialogTitle.value = '添加资料';
  dialogVisible.value = true;
  axios.post(`${BASE_URL}/v1/acceptance/save`, qs.stringify(saveProjectForm.value))
    .then((response) => {
      if (response.data.code == 2000) {
        ElMessage.success('添加成功!');
        loadData(); // 添加成功后重新加载数据
        handleClose(); // 关闭弹窗
      } else {
        ElMessage.error('添加失败!');
      }
    });

}



//定义删除数据的方法
const deleteCheck = (id) => {
  axios.post(`${BASE_URL}/v1/acceptance/delete/${id}`)
    .then((response) => {
      if (response.data.code == 2000) {
        ElMessage.success('删除成功!');
        loadData(); // 删除成功后重新加载数据
      } else {
        ElMessage.error('删除失败!');
      }
    });
}

// 定义编辑数据的方法
const editCheck = (id) => {
  dialogTitle.value = '编辑资料';
  dialogVisible.value = true;
  axios.get(`${BASE_URL}/v1/acceptance/select?id=${id}`)
    .then((response) => {
      if (response.data.code === 2000 && response.data.data) {
        // 确保所有字段都正确填充到表单中
        saveProjectForm.value = {
          id: response.data.data.id,
          projectId: response.data.data.projectId,
          materialId: response.data.data.materialId,
          materialNumber: response.data.data.materialNumber,
          approachSpecification: response.data.data.approachSpecification,
          enterDate: response.data.data.enterDate,
          sampleStatus: response.data.data.sampleStatus,
          experimentImg: response.data.data.experimentImg,
          materialUnit: response.data.data.materialUnit,
        };
      } else {
        ElMessage.error('加载失败: 数据为空或格式错误');
      }
    })
    .catch((error) => {
      ElMessage.error('请求失败: ' + error.message);
    });
}

//一进入页面就加载数据下·
onMounted(() => {
  loadData(); // 使用 loadData 方法加载数据
});

// 定义保存弹窗内容的方法
const saveProjectForm = ref({
  id: '',
  projectId: '',
  materialId: '',
  materialNumber: '',
  approachSpecification: '',
  enterDate: '',
  sampleStatus: '',
  experimentImg: '',
  materialUnit: '',
});

// 修改保存方法，确保传递正确的表单数据
const saveProject = () => {
  axios.post(`${BASE_URL}/v1/acceptance/update`, saveProjectForm.value) // 直接传递 JSON 数据，无需 qs.stringify
    .then((response) => {
      if (response.data.code === 2000) {
        ElMessage.success('保存成功!');
        dialogVisible.value = false;
        loadData(); // 保存成功后重新加载数据
      } else {
        ElMessage.error('保存失败!');
      }
    })
    .catch((error) => {
      ElMessage.error('请求失败: ' + error.message);
    });
}

// 修改弹窗的保存按钮点击事件

//定义变量保存分页器的当前页数
const currentPage = ref(1);
//定义变量保存分页器的每页显示多少条
const currentSize = ref(5);
//定义变量保存数据总条目数
const total = ref(100);
//修改每页显示多少条，触发此函数
const handleSizeChange = (val) => {
  console.log('每页展示' + val + '条数据');
  getApplication();
}
//修改当前页码，触发此函数
const handleCurrentChange = (val) => {
  console.log('当前的页数为：' + val);
  getApplication()
}
//定义获取取样情况数据的方法
const formatSampleStatus = (row) => {
  if (row.sampleStatus === '0') {
    return '未取样';
  } else if (row.sampleStatus === '1') {
    return '已取样';
  }
}
//定义获取合格情况数据的方法
const formatQualification = (row) => {
  if (row.qualification === '0') {
    return '不合格';
  } else if (row.qualification === '1') {
    return '合格';
  }
}

//定义材料数量的单位方法




</script>



<style scoped>

</style>

